<template>
	<view>
		<navigator url="/pages/user/addrList" hover-class="none" class="addr-box flex-between">
			<view class="left">
				<view class="top flex">
					<view>张三</view>
					<view>13565468545</view>
					<view class="default">默认</view>
				</view>
				<view class="bottom">
					河南省郑州市中原区
				</view>
			</view>
			<view class="iconfont iconyoujiantou1"></view>
		</navigator>
		<view class="goods">
			<view class="title">购买商品</view>
			<view class="list flex-between" v-for="(item,index) in 2" :key="'a1'+index">
				<image src="/static/imgs/menus1.jpg"></image>
				<view class="right flex-between">
					<view class="name">商品名称商品名称商品名称商品名称商品名称</view>
					<view class="price-num flex-between">
						<view class="price">￥12.00</view>
						<view class="num">共1件</view>
					</view>
				</view>
			</view>
			<view class="bottom flex-between">
				<view>商品总价:</view>
				<view class="right">￥200.00</view>
			</view>
		</view>
		<view class="pay-type">
			<view class="title">支付方式</view>
			<view class="list flex-between" @click="changeType(1)">
				<view class="left flex">
					<view class="iconfont iconweixin"></view>
					<text>微信支付</text>
					
				</view>
				<view class="iconfont right flex-center" :class="{iconduihao2:payType == 1}"></view>
			</view>
			<view class="list flex-between" @click="changeType(2)">
				<view class="left flex">
					<view class="iconfont iconzhifubao"></view>
					<text>支付宝支付</text>
				</view>
				<view class="right iconfont flex-center" :class="{iconduihao2:payType == 2}"></view>
			</view>
		</view>
		<view class="beizhu">
			<view class="title">订单备注</view>
			<view class="content">
				<textarea placeholder="填写备注"></textarea>
			</view>
		</view>
		<view class="footer flex-between">
			<view class="left">
				合计：<text>￥200.00</text>
			</view>
			<view class="btn flex-center">提交订单</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				payType:1
			}
		},
		methods: {
			changeType(index){
				this.payType = index;
			}
		}
	}
</script>

<style lang="less">
	@main-color:#039702;
	.addr-box{
		background: #fff;
		padding: 20rpx 30rpx;
		.top{
			view{
				font-size: 32rpx;
				margin-right: 20rpx;
				font-weight: bold;
				&.default{
					font-size: 22rpx;
					padding: 0 20rpx;
					border:2rpx solid @main-color;
					font-weight: normal;
					color:@main-color;
					transform: scale(.8);
				}
			}
			
		}
		.bottom{
			font-size: 30rpx;
			margin-top: 10rpx;
		}
	}
	.goods{
		margin: 30rpx 0;
		background: white;
		padding: 20rpx 30rpx 0;
		.title{
			font-size: 36rpx;
			font-weight: bold;
		}
		.list{
			margin-top: 30rpx;
			image{
				width: 200rpx;
				height:200rpx;
				border-radius: 20rpx;
			}
			.right{
				flex-direction: column;
				align-items: flex-start;
				width: 470rpx;
				height: 200rpx;
				.name{
					font-size: 32rpx;
					font-weight: bold;
				}
				.price-num{
					width: 100%;
				}
				.price{
					font-size: 32rpx;
					color:red;
					font-weight: bold;
				}
				.num{
					font-size: 30rpx;
					color:#999;
				}
			}
		}
		.bottom{
			height: 80rpx;
			font-size: 32rpx;
			justify-content: flex-end;
			.right{
				color:red;
				font-weight: bold;
			}
		}
	}
	.pay-type{
		margin:  0;
		background: white;
		padding: 20rpx 30rpx 0;
		.title{
			font-size: 36rpx;
			font-weight: bold;
		}
		.list{
			height: 100rpx;
			border-bottom: 2px solid #eee;
			font-size: 32rpx;
			.iconweixin{
				font-size: 50rpx;
				margin-right: 20rpx;
				color:#07C160;
			}
			.iconzhifubao{
				font-size: 50rpx;
				margin-right: 20rpx;
				color:#007AFF;
			}
			.right{
				width: 30rpx;
				height:30rpx;
				border:2rpx solid #999;
				border-radius: 50%;
			}
			.iconduihao2{
				color:@main-color
			}
		}
	}
	.beizhu{
		margin:30rpx  0 130rpx;
		background: white;
		padding: 20rpx 30rpx 0;
		.title{
			font-size: 36rpx;
			font-weight: bold;
		}
		.content{
			padding: 20rpx 0;
		}
		textarea{
			width: 100%;
			height:140rpx;
			background: #f6f6f6;
			padding: 20rpx;
			box-sizing: border-box;
			font-size: 32rpx;
			border-radius: 10rpx;
		}
	}
	.footer{
		position: fixed;
		bottom:0;
		width: 100vw;
		height: 100rpx;
		background: white;
		box-shadow: 0 5rpx 15rpx 15rpx #eee;
		padding: 0 30rpx;
		box-sizing: border-box;
		.left{
			font-size: 34rpx;
			color:red;
			text{
				font-weight: bold;
			}
		}
		.btn{
			width: 180rpx;
			height: 60rpx;
			background: @main-color;
			font-size: 32rpx;
			border-radius: 30rpx;
			color:#fff;
		}
	}
</style>
